<template>
  <div class="button-group">
    <el-button :class="['system-button', currentSystem === 'hcda' ? 'system-button-selected': '']" type="primary" @click="systemSwitch('hcda')">HCDA</el-button>
    <el-button :class="['system-button', currentSystem === 'lcda' ? 'system-button-selected' :'']" type="primary" @click="systemSwitch('lcda')">LCDA</el-button>
  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'
export default {
  props: {
    currentSystem: {
      type: String,
      default: ''
    }
  },
  watch: {
    currentSystem(val) {
      this.currentSystem = val
    }
  },
  methods: {
    systemSwitch(type) {
      this.$emit('setSystem', type)
    }
  }
}
</script>
<style lang="scss" scoped>
.button-group{
    flex:0;
    display: flex;
    flex-direction: row;

    .system-button{
      width: 8rem;
      color:white;
      align-self: center;
      background-color:transparent;
      border: 0;
      border-radius: 0;
    }

  }
  .system-button-selected{
    background-color: #05417f !important;
  }
</style>
